<template>
  <div
    :class="['input-image', isBig ? 'isBig' : '']"
    :style="{ width: width + 'px', height: height + 'px', 'border-radius': radius }"
    @click="toggle"
  >
    <img :src="src">
  </div>
</template>
<script>
export default {
  name: 'InputImage',
  props: {
    src: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 80
    },
    height: {
      type: Number,
      default: 80
    },
    radius: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      isBig: false
    }
  },
  methods: {
    toggle() {
      this.isBig = !this.isBig
    }
  }
}
</script>
<style lang="scss">
.input-image {
  &.isBig{
    width: 100%!important;
    height: 100%!important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    >img{
      width: 500px;
      height: auto;
      object-fit: inherit;
    }
  }
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>

